<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>generateRandomIP</title>
    <style>
        .ew-btn {
            line-height: 1;
            white-space: nowrap;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            user-select: none;
            transition: .1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            outline: none;
            display: inline-block;
            cursor: pointer;
        }

        .ew-btn:hover,
        .ew-btn:active {
            color: #57a3f3;
            background-color: #fff;
            border-color: #57a3f3;
        }
    </style>
</head>

<body>
    <button class="ew-btn" type="button" id="generateBtn">点击随机生成IP地址</button>
    <div id="result"></div>
    <script>
        const generateRandomIP = () =>
            Array.from({ length: 4 }, () => Math.floor(Math.random() * 256)).join('.');
        const btn = document.querySelector('#generateBtn');
        const result = document.querySelector('#result');
        btn.addEventListener('click', () => {
            result.innerHTML += `<p class="ip-text">${generateRandomIP()}</p>`;
        })
    </script>
</body>

</html>